<template>
<div class="content">
    <div class="stu-login">
      <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/beijing.png" alt="" />
      <form action="">
        <yd-flexbox>
          <div class="form-left">
            <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/icon-01@2x.png" alt="" style="width: 7%;height: 12%;">
          </div>
          <yd-flexbox-item class="form-right">
            <input type="text" placeholder="请输入账号" v-model="mobile">
          </yd-flexbox-item>
        </yd-flexbox>

        <yd-flexbox>
          <div class="form-left">
            <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/icon-02@2x.png" alt="" style="width: 8%;height: 12%;">
          </div>
          <yd-flexbox-item class="form-right">
            <input type="password"  v-model="password"  value="123456" readonly="readonly" >
          </yd-flexbox-item>
        </yd-flexbox>
        <button @click.prevent="login()">
          学生端登录
        </button>
      </form>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Toast } from 'mint-ui';
  export default {
    name: "stu_login",
    data: function () {
      return {
        mobile:'',
        password:'123456'
      }
    },
    methods:{
      login(){
       
        // console.log(this.mobile);
        if(this.mobile == ''){
           Toast({
              message: '请输入用户名',
              position: 'middle',
              duration: 3000
            })
        }else{
          axios.post('https://shixiaozhang.cn/api/app/courserecord/do_student_login',{
          mobile:this.mobile,
          password:this.password
        }).then((val) => {
           console.log(val);
           if( val.data.msg == "账户不存在！"){
              Toast({
              message: '请正确的用户名！',
              position: 'middle',
              duration: 3000
            })
           } else {
             if(val.data.data.id != localStorage.getItem('user_id')){
               localStorage.setItem('confir','0')
                localStorage.setItem('usernames','')
             }
            localStorage.setItem('user_id',val.data.data.id);
            localStorage.setItem('user_uid',val.data.data.uid);
            localStorage.setItem('user_name',val.data.data.username);
            this.$router.push('/index');
            this.setCookie(this.mobile,this.password,365)
             
          }
         
        }).catch((err) => {
          console.log(err);
        })
        }
      
      },
       setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userNames" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwds" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userNames') {
                            this.mobile = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwds') {
                            this.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            }
    },
    mounted () {
      this.getCookie()
    
    }
  }
</script>

<style scoped>
.content{
  width: 100%;
  height: auto
}
  .stu-login{
    width: 100%;
    height: 100%;
    font-size: inherit;
  }
  .stu-login img{
  	position: absolute;
    left: 0;
    top:0;
  	width: 100%;
  	height: 100%;
  }
  .stu-login form{
  	position: absolute;
  	width: 80%;
  	top: 55%;
  	left: calc(50% - 40%);
  }
  .yd-flexbox{
    margin-bottom: 14%;
  }
  .form-left{
    width: 2%;
    height: 2%;
  }
  .form-right{
    margin-left: .4rem;
  }
  .form-right input{
    width: 100%;
    height: .8rem;
    font-size: .27rem;
    color: #A4AAA9;
    padding: 0 .35rem;
    border-bottom: solid .02rem #1FDDBE;
  }
  .form-right input::-webkit-input-placeholder{
    color:#A4AAA9;
    font-size: .27rem;
  }
  button{
    width: 4.26rem;
    height: .92rem;
    margin-left: calc(50% - 2.13rem);
    background: url(https://wxoss.xiaoniaoai.com/growth_archives/img/bg-login-button.png) no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: 0 0;
    border: none;
    border-radius:200px;
    color: #ffffff;
    line-height: .8rem;
    font-size: .28rem;
    padding-bottom: .28rem;
  }
</style>
